<template>
	<view>
		<!-- 背景圖 -->
		<image class="backImage" src="http://139.159.229.212:8889/index/fujiajia/矩形111.png" mode="widthFix"></image>

		<view class="container">
			<!-- 用戶信息 -->
			<view class="user-info">
				<view class="user-info-left">
					<image class="user-info-image" src="/static/share.gif" mode=""></image>
					<view class="user-info-name">
						<view class="name">{{userInfo.name}}</view>
						<view class="info">
							<view class="uid">UID:{{userInfo.uid}}</view>
							<view class="contribute">贡献值:{{userInfo.contribute}}</view>
						</view>
					</view>
				</view>
				<view class="user-info-right">
					<image class="medal" src="http://139.159.229.212:8889/index/fujiajia/xunzhang.png" mode=""></image>
					<view class="post">
						<image class="gradient" src="http://139.159.229.212:8889/index/fujiajia/jianbian.png" mode="">
						</image>
						<view>{{userInfo.post}}</view>
					</view>
				</view>
			</view>

			<!-- 錢包 -->
			<view class="money-bag">
				<image class="money-bag-image" src="http://139.159.229.212:8889/index/fujiajia/jianbianback.png"
					mode="">
				</image>
				<view class="money-bag-content">
					<view class="money-content-left">
						<view class="">
							<image src="http://139.159.229.212:8889/index/fujiajia/bag.png" mode=""></image>
							<text>我的钱包</text>
						</view>
						<view class="">
							<image src="#" mode=""></image>
							点击可查看我的钱包收益情况
						</view>
					</view>
					<view class="money-content-right">
						<view class="join-btn">
							立即进入
						</view>
					</view>
				</view>
			</view>

			<!-- 我的服務 -->
			<view class="mine-server">
				<view class="server-title">
					我的服务
				</view>
				<view class="server-content">
					<view class="server-item" v-for="item in server">
						<view class="server-image-box">
							<image :src="item.image_url" mode="widthFix"></image>
						</view>
						<view class="server-item-title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<!-- 小助手 -->
			<view class="small-assistant">
				<view class="assistant-title">
					小助手
				</view>
				<view class="assistant-content">
					<view class="assistant-item" v-for="item in assistant">
						<view class="assistant-image-box">
							<image :src="item.image_url" mode=""></image>
						</view>
						<view class="assistant-item-title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部tabbar -->
		<tabBar :selectIndex="selectIndex"></tabBar>
	</view>
</template>

<script>
	import tabBar from "../components/tabBar/index.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				selectIndex: 2,
				userInfo: {
					name: "今天喝咖啡",
					uid: 16260,
					contribute: 0,
					post: "业务员"
				},
				server: [{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/order2.png',
						title: '我的订单'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/fensi.png',
						title: '我的粉丝'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/guanzhu.png',
						title: '我的关注'
					},
				],
				assistant: [{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 12.png',
						title: '商家入驻'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 17.png',
						title: '申请拓店'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 13.png',
						title: '会员升级'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 141.png',
						title: '邀请好友'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 15.png',
						title: '服务协议'
					},
					{
						image_url: 'http://139.159.229.212:8889/index/fujiajia/编组 16.png',
						title: '会员商城'
					}
				]
			};
		}
	}
</script>

<style lang="less" scoped>
	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.container {
		padding-top: 140rpx;
		padding-bottom: 178rpx;
		width: 690rpx;
		margin: auto;
		position: relative;

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-info-left {
				display: flex;

				.user-info-image {
					width: 137rpx;
					height: 137rpx;
					border-radius: 100rpx;
				}

				.user-info-name {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 10rpx 20rpx;

					.info {
						color: #666666;
						font-size: 24rpx;
						line-height: 140%;
					}
				}
			}

			.user-info-right {
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.medal {
					width: 51rpx;
					height: 58rpx;
					margin-bottom: -5rpx;
				}

				.post {
					width: 98rpx;
					height: 38rpx;
					position: relative;
					color: #fff;
					padding: 10rpx 0;

					.gradient {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 50%;
						transform: translate(-50%, 0);
					}

					view {
						z-index: 16;
						position: relative;
						line-height: 38rpx;
						transform: scale(0.8) !important;
						font-size: 16rpx;
					}
				}
			}
		}

		.money-bag {
			padding-top: 30rpx;

			.money-bag-image {
				width: 100%;
				height: 126rpx;
				position: absolute;
			}

			.money-bag-content {
				position: relative;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 126rpx;

				.money-content-left {
					color: #FFF;

					view {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						padding: 4rpx 0;

						image {
							vertical-align: middle;
							margin-right: 10rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}
				}

				.join-btn {
					background-color: #fff;
					padding: 10rpx 30rpx;
					border-radius: 100rpx;
					font-weight: 500;
				}
			}
		}

		.mine-server {
			width: 100%;
			background-color: #fff;
			height: 241rpx;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

			.server-content {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.server-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.server-image-box {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 72rpx;
						}
					}

					.server-item-title {
						padding: 10rpx 0;
						font-size: 24rpx;
					}
				}
			}
		}

		.small-assistant {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

			.assistant-content {
				padding-top: 40rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
				place-items: center;
				width: 100%;

				.assistant-item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					text-align: center;
					margin-bottom: 20rpx;

					image {
						width: 58rpx;
						height: 58rpx;
					}

					.assistant-item-title {
						font-size: 24rpx;
						padding-top: 6rpx;
					}
				}
			}

		}
	}
</style>